<!doctype html>
<html>

<head>
    <title>我的相册</title>
    <meta charset="utf-8">
    <!--引入第三方库-->
    <link rel="stylesheet" href="libs/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="libs/fancybox/helpers/jquery.fancybox-thumbs.css">
    <link rel="stylesheet" href="libs/fancybox/helpers/jquery.fancybox-buttons.css">
    <!--引入jquery库-->
    <script src="libs/jquery.js"></script>
    <script src="libs/fancybox/jquery.fancybox.js"></script>
    <script src="libs/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script src="libs/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <style>
    html{
        height: 100%;
    }
    body {
        /*设置背景颜色*/
        background-color: #333;
        /*设置宽高*/
        width: 100%;
        height: 100%;
        /*剪切元素溢出内容*/
        overflow: hidden;
    }
    
    #xc div {
        position: absolute;
        left: 50%;
        top: 50%;
        /*设置宽高*/
        width: 100px;
        height: 100px;
        /*设置元素的边框颜色 大小 类型
        语法:border:大小 类型 颜色;位置不固定
        solid表示实线，dashed虚线...*/
        border: solid 5px white;
        /*设置元素下边框*/
        border-bottom: solid 18px white;
        /*transition:CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
        要实现这一点，必须规定两项内容：
        规定您希望把效果添加到哪个 CSS 属性上
        规定效果的时长*/
        transition: transform 0.5s;
    }
    /*:hover表示鼠标经过*/
    
    #xc div:hover {
        /*让图片放大到1.5倍 
        css !important作用是指定CSS样式规则为最高优先级 */
        transform: scale(1.5, 1.5) !important;
        /*z-index 属性指定一个元素的堆叠顺序。*/
        /*拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
        PS：z-index只用于定位元素*/
        z-index: 100;
    }
    
    #xc div a {
        /*转变成块级元素*/
        display: block;
        /*设置宽高*/
        width: 100px;
        height: 100px;
        /*text-indent 属性规定文本块中首行文本的缩进。*/
        /*注意： 负值是允许的。如果值是负数，将第一行左缩进。*/
        text-indent: -200px;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div id="xc">
        <div style="background-image:url(images/thumbs/0.jpg)"><a href="images/0.jpg" rel="group">在大海中冲浪</a></div>
        <div style="background-image:url(images/thumbs/1.jpg)"><a href="images/1.jpg" rel="group">图片2</a></div>
        <div style="background-image:url(images/thumbs/2.jpg)"><a href="images/2.jpg" rel="group">图片3</a></div>
        <div style="background-image:url(images/thumbs/3.jpg)"><a href="images/3.jpg" rel="group">图片4</a></div>
        <div style="background-image:url(images/thumbs/4.jpg)"><a href="images/4.jpg" rel="group">图片5</a></div>
        <div style="background-image:url(images/thumbs/5.jpg)"><a href="images/5.jpg" rel="group">图片6</a></div>
        <div style="background-image:url(images/thumbs/6.jpg)"><a href="images/6.jpg" rel="group">图片7</a></div>
        <div style="background-image:url(images/thumbs/7.jpg)"><a href="images/7.jpg" rel="group">图片8</a></div>
        <div style="background-image:url(images/thumbs/8.jpg)"><a href="images/8.jpg" rel="group">图片9</a></div>
        <div style="background-image:url(images/thumbs/9.jpg)"><a href="images/9.jpg" rel="group">图片10</a></div>
        <div style="background-image:url(images/thumbs/10.jpg)"><a href="images/10.jpg" rel="group">图片11</a></div>
        <div style="background-image:url(images/thumbs/11.jpg)"><a href="images/11.jpg" rel="group">图片12</a></div>
        <div style="background-image:url(images/thumbs/12.jpg)"><a href="images/12.jpg" rel="group">图片13</a></div>
        <div style="background-image:url(images/thumbs/13.jpg)"><a href="images/13.jpg" rel="group">图片14</a></div>
        <div style="background-image:url(images/thumbs/14.jpg)"><a href="images/14.jpg" rel="group">图片15</a></div>
        <div style="background-image:url(images/thumbs/15.jpg)"><a href="images/15.jpg" rel="group">图片16</a></div>
    </div>
    <script src="index.js"></script>
</body>

</html>
